<template>
  <base-breadcrumb>
    <a-card :bordered="false">
      <title-name title="基础信息" />

      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="分包商名称"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.subcontractors"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="分公司"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.branch"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="项目名称"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.projectName"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="项目编号"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.projectNum"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="分包商联系人"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.contacts"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="联系人电话"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.contactPhone"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="资质类别等级"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.certificateLevel"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="统一社会信用代码"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.businessLicense"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="安全生产许可证"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.productionNum"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="考核时间"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <a-select
              v-model="dels.assessmentTime"
              style="width: 100%"
              @change="getAssessmentTime"
              @popupScroll="scrollMore"
            >
              <a-select-option
                v-for="item in assessmentTimes"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <a-button
              type="primary"
              @click="searchData"
            >
              确定
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>

      <title-name title="考核信息" />

      <!--<div style="margin-bottom: 20px">-->
      <!--<a-button type="primary">导出</a-button>-->
      <!--</div>-->

      <print-button
        :print-content="htmlData"
        :before-print-fn="getQuarterAssessmentDoc"
        style="margin-bottom: 20px"
      />

      <!--<div class="pub-table-select-count">-->
      <!--<a-icon type="info-circle" theme="twoTone"/>-->
      <!--<span style="margin-right: 12px"> 考核中内容：<span class="totalNum">{{totalDels.contentNum}} 个</span> |  已考核：<span class="totalNum">{{totalDels.assessedNum}} 个</span> |  未考核：<span class="totalNum">{{totalDels.unAssessedNum}} 个</span> </span>-->
      <!--</div>-->

      <a-table
        bordered
        :pagination="false"
        :columns="columns"
        :data-source="data"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <template
          :slot="scoreIndex1"
          slot-scope="text, record,index"
        >
          <span v-if="record[scoreIndex1] == undefined || record[scoreIndex2] == undefined" />
          <span v-if="record[scoreIndex1] != undefined ">{{ record[scoreIndex1] }}</span>
        </template>
        <template
          :slot="scoreIndex2"
          slot-scope="text, record,index"
        >
          <span
            v-if="record[scoreIndex2] == undefined"
            class="notScore"
          >未评分 <img
            width="20px"
            height="20px"
            src="../../../assets/icons/notScore.png"
          ></span>
          <span v-if="record[scoreIndex2] != undefined ">{{ record[scoreIndex2] }}</span>
        </template>
        <template
          :slot="scoreIndex3"
          slot-scope="text, record,index"
        >
          <ellipsis
            :length="40"
            tooltip
          >
            {{ text }}
          </ellipsis>
        </template>
        <template
          :slot="scoreIndex4"
          slot-scope="text, record,index"
        >
          <ellipsis
            :length="40"
            tooltip
          >
            {{ text }}
          </ellipsis>
        </template>
        <template
          :slot="scoreIndex"
          slot-scope="text, record,index"
        >
          <span v-if="record[scoreIndex] == undefined ">无</span>
          <span v-if="record[scoreIndex] != undefined ">{{ record[scoreIndex] }}</span>
        </template>
      </a-table>
    </a-card>

    <div class="page-btn-right-top">
    <!-- <div style="float: right;margin-top: 20px"> -->
      <a-button
        type="primary"
        @click="returnBack"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import { getMonthHeaders,getMonthContent,getQuarterDetails, getQuarterDetailsTotal, getQuarterly,getQuarterAssessmentDoc } from '@/api/subcontractors/quarterAssessment'
  import printButton from '@/components/BasePrintButton'
  import ARow from 'ant-design-vue/es/grid/Row'

  export default {
    name:'a'+Date.now(),
    components: {
      ARow,
      printButton,
      Ellipsis,
    },
    data() {

      return {
        htmlData:'',

        columns:[], // 表头
        data:[],
        dels:{},   // 获取分包商管理基本信息对象

        queryParams:{
          id:'',
          assessmentTime:''
        },
        assessmentId:'',
        assessmentTimes:[],

        subcontractorId:"", // 分包商id

        scoreIndex:'',  // 实际评分的dataIndex
        scoreIndex1:'', // 实际考核人员的dataIndex
        scoreIndex2:'', // 状态的dataIndex

        scoreIndex3:'', // 扣分标准的dataIndex
        scoreIndex4:'', // 主要检查的dataIndex

        pageNo:1,   // 调入人员分页
        pageSize:20,    // 调入人员分页数量
        totalPages:0,    // 总页数

        loginName:'',

      }
    },

    created() {
        this.assessmentId = this.$route.query.assessmentId
        this.queryParams.id = 1
        this.loginName =  JSON.parse(sessionStorage.getItem('ycloud-user_info')).name
        this.getQuarterAssessmentOne()
        this.getMonthHeaders()
        this.getMonthContent()
    },
    computed: {

    },
    methods: {

      getQuarterAssessmentDoc(){
        let that = this;
        return new Promise((resolve, reject) => {
          let data = { templateCode:'CSCEC8XN-SG-B11007',businessId:this.assessmentId }
          getQuarterAssessmentDoc(data).then(res => {
            if(res.code == 200 || res.data.code === 200){
              resolve(res.data.content)
            }
          }).catch((e) => {
            that.$message.error(e)
          }).finally(() => {
            resolve()
          })
        })

      },

      // 查询表头数据
      getMonthHeaders(){
        let that = this;
        getMonthHeaders({id:that.assessmentId}).then(res=>{
          that.columns = res.data
          let obj =  {
            "dataIndex": "serial",
            "formId": null,
            "title": "序号",
            "code": "0",
            "sort": 0,
            "inputType": null,
            scopedSlots: { customRender: 'serial' }
          }
          that.columns.unshift(obj)



          let objScore = {}   // 实际评分
          let objScore1 = {}   // 实际考核人员
          let objScore2 = {}   // 状态

          let objScore3 = {}   // 扣分标准
          let objScore4 = {}   // 主要检查内容


          this.columns.forEach(function(objs,i) {
            objScore = that.columns.filter(item=>item.title=='实际评分')
            objScore1 = that.columns.filter(item=>item.title=='实际考核人员')
            objScore2 = that.columns.filter(item=>item.title=='状态')

            objScore3 = that.columns.filter(item=>item.title=='扣分标准')
            objScore4 = that.columns.filter(item=>item.title=='主要检查内容')

          })

          objScore[0].scopedSlots={ customRender:  objScore[0].dataIndex }
          objScore1[0].scopedSlots={ customRender:  objScore1[0].dataIndex }
          objScore2[0].scopedSlots={ customRender:  objScore2[0].dataIndex }
          objScore3[0].scopedSlots={ customRender:  objScore3[0].dataIndex }
          objScore4[0].scopedSlots={ customRender:  objScore4[0].dataIndex }

          that.scoreIndex = objScore[0].dataIndex
          that.scoreIndex1 = objScore1[0].dataIndex
          that.scoreIndex2 = objScore2[0].dataIndex
          that.scoreIndex3 = objScore3[0].dataIndex
          that.scoreIndex4 = objScore4[0].dataIndex
        })
      },
      // 查询季度考核内容
      getMonthContent(){
        getMonthContent({id:this.assessmentId}).then(res=>{
          this.data = res.data.list
        })
      },

      // 查询季度考核时间
      getAssessmentTime(val){
        this.dels.assessmentTime = val
      },

      // 查询季度考核详情
      getQuarterAssessmentOne(){
        getQuarterDetails(this.assessmentId).then(res=>{
          if(res.code == 200){
            this.dels = res.data
            this.getQuarterlyReq()
          }
        })
      },

      // 下拉滚动加载
      scrollMore(e) {
        const { target } = e
        var total = target.scrollTop + target.offsetHeight
        var scrollHeight = target.scrollHeight

        // this.pageNo是当前页 this.totalPage是总页数
        if (total >= scrollHeight - 3 && total < scrollHeight + 3 && this.pageNo <= this.totalPages ) {
          this.pageNo = this.pageNo + 1
          this.getQuarterlyReq () // 调用api方法
        }
      },



      // 查询季度时间
      getQuarterlyReq(){
        let that = this
        getQuarterly({subContractorId:that.dels.subContractorId,pageNo:that.pageNo,pageSize:that.pageSize}).then(res=>{
          that.assessmentTimes = res.data
          this.totalPages = res.totalPages
        })
      },

      // 搜索
      searchData(){
        let that = this;
        getMonthContent({subcontractorId:that.dels.subContractorId,assessmentTime:that.dels.assessmentTime}).then(res=>{
          that.data = res.data.list
        })
      },

      // 返回
        returnBack(){
        this.$multiTab.close(this.$route.fullpath)
      },
    }
  }
</script>
<style scoped>
  .notScore{
    width: 65px;
    display: flex
  }
</style>

